<template>
  <div id="content" style="display: flex">
    <div class="left">
      <div style="display: flex; align-items: center; flex-direction: column">
        <el-input
            size="small"
            clearable
            v-model="parms.storeName"
            @clear="selectInputClear"
            @input="selectInputChange"
            placeholder="请输入门店名称"
        ></el-input>
        <!-- <el-select size="small" style="width: 100%;margin-top: 8px" placeholder="请选择地区"></el-select> -->
        <el-button
            type="primary"
            size="small"
            @click="addStore(null)"
            style="margin-top: 20px"
        >添加门店
        </el-button
        >
      </div>
      <ul style="margin-top: 15px">
        <template v-for="(item, index) in storeList">
          <li :key="index" @click="checkStoreItem(item)">
            <span
                :style="{ opacity: checkStorId === item.shopId ? 1 : 0 }"
            ></span
            >{{ item.shopName }}
          </li>
        </template>

        <!-- <li><span></span>福晟金融中心店</li>
        <li><span></span>凯德壹中心店</li>
        <li><span></span>高桥大市场A区1-1125门店</li> -->
      </ul>
    </div>
    <div class="right">
      <template v-if="storeDetail && storeDetail.shopName">
        <div class="topInfo">
          <div style="display: flex; justify-content: space-between">
            <p style="font-weight: bold; font-size: 16px">
              {{ storeDetail.shopName }}
              <span class="province">{{ fifterVal(1) }}</span>
            </p>
            <p>建店时间：{{ fifterVal(2) }}</p>
          </div>
          <div style="display: flex">
            <p style="color: #919398">
              {{ storeDetail.address }}
            </p>
            <p style="margin-left: 100px">经度：{{ storeDetail.lon }}</p>
            <p style="margin-left: 20px">纬度：{{ storeDetail.lat }}</p>
          </div>
          <div
              style="
              display: flex;
              justify-content: space-between;
              margin: 30px 0;
            "
          >
            <p>店长姓名：{{ storeDetail.storeManagerName }}</p>
            <p>店长电话：{{ storeDetail.storePhone }}</p>
            <p>加盟商：{{ storeDetail.joinName }}</p>
            <p>加盟商电话：{{ storeDetail.joinPhone }}</p>
            <p>营业时间：{{ storeDetail.openTime }}</p>
          </div>
        </div>
        <div class="clerkTable">
          <div
              style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <p style="font-weight: bold">员工列表:</p>
            <p>
              <el-link style="color: #e6a23c" @click="addUser"
              >新增员工
              </el-link
              >
            </p>
          </div>
          <el-table
              :data="storeUserData"
              height="250px"
              border
              stripe
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{
              fontSize: '14px',
              'background-color': '#F3F6FD',
              color: '#333333',
              textAlign: 'center',
            }"
          >
            <el-table-column
                prop="storeStaffName"
                label="姓名"
            ></el-table-column>
            <el-table-column prop="roleName" label="角色"></el-table-column>
            <!-- <el-table-column prop="gender" label="性别"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column> -->
            <el-table-column prop="isLeave" label="状态">
              <template v-slot:default="scope">
                <span v-if="scope.row.isLeave === 1">离职</span>
                <span v-if="scope.row.isLeave === 0">在职</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="entryTime"
                label="入职时间"
            ></el-table-column>
            <el-table-column prop="f" label="身份证">
              <template v-slot:default="scope">
                <div style="display: flex; flex-direction: row">
                  <el-image
                      v-if="scope.row.idCardFront"
                      :src="'https://' + scope.row.idCardFront"
                      style="width: 50px; height: 50px; margin-right: 2px"
                      :preview-src-list="['https://' + scope.row.idCardFront]"
                  ></el-image>
                  <el-image
                      v-if="scope.row.idCardBack"
                      :src="'https://' + scope.row.idCardBack"
                      style="width: 50px; height: 50px"
                      :preview-src-list="['https://' + scope.row.idCardBack]"
                  ></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="f" label="健康证">
              <template v-slot:default="scope">
                <el-image
                    v-if="scope.row.healthCertificate"
                    :src="'https://' + scope.row.healthCertificate"
                    style="width: 50px; height: 50px"
                    :preview-src-list="['https://' + scope.row.healthCertificate]"
                ></el-image>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="years" label="年限"></el-table-column> -->
            <el-table-column prop="phoneNum" label="电话号码"></el-table-column>
            <el-table-column label="操作">
              <template v-slot:default="scope">
                <!-- <el-link>编辑</el-link> -->
                <el-link
                    v-if="scope.row.isLeave === 0"
                    @click="leaveTab(scope.row, scope.$index)"
                >离职
                </el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="goodsTable" style="margin-top: 20px">
          <div
              style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <p style="font-weight: bold">商品列表:</p>
            <p>
              <!-- <el-link style="color: #e6a23c">新增商品</el-link> -->
            </p>
          </div>
          <el-table
              :data="storeShopListData"
              max-height="250px"
              border
              stripe
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{
              fontSize: '14px',
              'background-color': '#F3F6FD',
              color: '#333333',
              textAlign: 'center',
            }"
          >
            <el-table-column
                prop="goodsName"
                label="商品名称"
            ></el-table-column>
            <!-- <el-table-column prop="b" label="简介"></el-table-column> -->
            <!-- <el-table-column prop="c" label="类型"></el-table-column> -->
            <el-table-column prop="categoryName" label="分类"></el-table-column>
            <el-table-column prop="e" label="图片">
              <template v-slot:default="scope">
                <el-image
                    v-if="scope.row.image"
                    :src="'https://' + scope.row.image"
                    style="width: 100px; margin-right: 15px"
                    :preview-src-list="['https://' + scope.row.image]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="costPrice" label="成本价"></el-table-column>
            <el-table-column prop="price" label="销售价"></el-table-column>
            <el-table-column prop="stock" label="库存"></el-table-column>
            <el-table-column prop="stock" label="上/下架">
              <template v-slot:default="scope">
                <span v-if="scope.row.stock > 0">已上架</span>
                <span v-if="scope.row.stock === 0">已下架</span>
              </template>
            </el-table-column>
            <el-table-column prop="stockStatus" label="库存状态">
              <template v-slot:default="scope">
                <span v-if="scope.row.stockStatus === 0">正常</span>
                <span v-if="scope.row.stockStatus === 1">警告</span>
                <span v-if="scope.row.stockStatus === 2">售罄</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot:default="scope">
                <el-link @click="updateInventory(scope.row, scope.$index)"
                >修改库存
                </el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pic" style="display: flex; margin-top: 15px">
          <div style="width: 50%">
            <p style="font-weight: bold; margin-bottom: 10px">门店实拍：</p>
            <div>
              <template v-if="storeDetail.shopImageList.length">
                <el-image
                    v-for="(item, index) in storeDetail.shopImageList"
                    :key="index"
                    :src="'https://' + item"
                    style="width: 100px; margin-right: 15px"
                    :preview-src-list="['https://' + item]"
                ></el-image>
              </template>
            </div>
          </div>
          <div>
            <p style="font-weight: bold; margin-bottom: 10px">营业执照：</p>
            <div>
              <!-- 营业执照 -->
              <el-image
                  v-if="storeDetail.businessLicense"
                  :src="'https://' + storeDetail.businessLicense"
                  style="width: 100px; margin-right: 15px"
                  :preview-src-list="['https://' + storeDetail.businessLicense]"
              ></el-image>

              <!-- 生产许可 -->
              <el-image
                  v-if="storeDetail.productionLicense"
                  :src="'https://' + storeDetail.productionLicense"
                  style="width: 100px; margin-right: 15px"
                  :preview-src-list="['https://' + storeDetail.productionLicense]"
              ></el-image>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <el-skeleton/>
      </template>
    </div>

    <dialogStore ref="dialogStore" @addStatus="addStatus"></dialogStore>
    <dialogStoreUser
        ref="dialogStoreUser"
        :shopId="checkStorId"
        @addStatus="addStatus"
    ></dialogStoreUser>

    <el-dialog
        :visible.sync="dialogVisibleKuCun"
        width="32%"
        :title="'修改库存'"
    >
      <el-form :model="kuCunObject" ref="supplierForm" label-width="0">
        <el-form-item prop="stock">
          <div style="display: flex">
            <p style="width: 90px; text-align: center; font-weight: bold">
              库存：
            </p>
            <el-input-number
                size="small"
                v-model="kuCunObject.stock"
            ></el-input-number>
          </div>
        </el-form-item>
        <div style="margin-top: 20px; text-align: right">
          <el-button
              @click="dialogVisibleKuCun = false"
              style="
              background-color: #f3f6fd;
              color: #303e9d;
              width: 100px;
              height: 40px;
              font-weight: bold;
              font-size: 14px;
            "
              size="small"
          >取 消
          </el-button>
          <el-button
              @click="_submit_kucun"
              style="
              background-color: #303e9d;
              color: #eeeeee;
              width: 100px;
              height: 40px;
              font-weight: bold;
              font-size: 14px;
            "
              size="small"
          >保 存
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import dialogStore from './componentDialog/storeList/dialogStore.vue'
import dialogStoreUser from './componentDialog/storeList/dialogStoreUser.vue'
import Uploader from '@/components/Element/Uploader.vue'

export default {
  name: 'storeList',
  meta: {title: '门店列表', icon: 'el-icon-takeaway-box', sort: 4},
  components: {Uploader, dialogStore, dialogStoreUser},
  data() {
    return {
      kuCunObject: {
        goodsId: null,
        stock: 0,
        shopId: null,
        rowIndex: 0,
      },
      parms: {
        storeName: '',
      },
      dialogVisibleKuCun: false,
      checkStorId: null,
      storeList: [],
      storeDetail: null,
      goodsData: [
        {
          a: '黑森林蛋糕',
        },
      ],
      count: 0,
      storeUserData: [],
      storeShopListData: [],
    }
  },
  created() {
    this.getStoreList()
  },
  methods: {
    selectInputClear() {
      this.parms.storeName = ''
      this.getStoreList()
    },
    selectInputChange(e) {
      console.log('输入内容变化', e)
      this.getStoreList()
    },
    leaveTab(val, rowIndex) {
      this.$confirm(`此操作将该员工离职, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
          .then(() => {
            this.$api
                .shopUpdateIsLeave({
                  assistantId: val.storeStaffId,
                  isLeave: 1, //是否离职 0 在职 1 离职
                })
                .then((res) => {
                  console.log('离职', res)
                  if (res) {
                    this.$message({
                      type: 'success',
                      message: `操作成功!`,
                    })
                    this.storeUserData[rowIndex].isLeave = 1
                  }
                })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
    _submit_kucun() {
      if (this.kuCunObject.stock < 0) {
        return this.$message.error('请输入正确的库存!')
      }
      this.$api.goodsUpdateGoodsStock(this.kuCunObject).then((res) => {
        console.log('修改库存', res)
        if (res) {
          this.storeShopListData[this.kuCunObject.rowIndex].stock =
              this.kuCunObject.stock
          this.dialogVisibleKuCun = false
          console.log('库存', this.kuCunObject, this.storeShopListData)
          return this.$message.success('修改成功!')
          this.getStoreDetail(this.checkStorId)
        } else {
          return this.$message.error('网络异常!')
        }
      })
    },
    updateInventory(val, index) {
      console.log('修改库存', val, index)
      this.kuCunObject.goodsId = val.goodsId
      this.kuCunObject.shopId = this.checkStorId
      this.kuCunObject.stock = val.stock
      this.kuCunObject.rowIndex = index
      this.dialogVisibleKuCun = true
    },
    addUser() {
      this.$refs.dialogStoreUser.handleOpen()
    },
    addStore(val) {
      this.$refs.dialogStore.handleOpen(val)
    },
    addStatus(status) {
      if (status == 1) {
        // this.params.pageNumber = 1
        this.getStoreList()
      }
    },
    fifterVal(type) {
      if (this.storeDetail) {
        if (type == 1) {
          return this.storeDetail.address.substring(0, 2)
        } else if (type == 2) {
          return this.storeDetail.createTime.split(' ')[0]
        }
      } else {
        return ''
      }
    },
    // getStoreDetail(id) {
    //   this.$api.shopGetPCShopDetail({shopId: id}).then((res) => {
    //     this.storeDetail = ''
    //     setTimeout(() => {
    //       this.storeDetail = res
    //       if (res.storeStaffList && res.storeStaffList.length) {
    //         this.storeUserData = res.storeStaffList
    //       }
    //       if (res.pcGoodsVoList && res.pcGoodsVoList.length) {
    //         this.storeShopListData = res.pcGoodsVoList
    //       }
    // }, 1000)
    //   })
    // },
    getStoreDetail(id) {
      this.$api.shopGetPCShopDetail({shopId: id}).then((res) => {
        this.storeDetail = res || {}
        this.storeUserData = Array.isArray(res.storeStaffList) ? res.storeStaffList : []
        this.storeShopListData = Array.isArray(res.pcGoodsVoList) ? res.pcGoodsVoList : []
      })
    },
    getStoreList() {
      this.$api.shopGetPCShopList(this.parms).then((res) => {
        this.storeList = res
        this.checkStorId = this.storeList[0].shopId
        this.getStoreDetail(this.checkStorId)
      })
    },

    // 点击门店
    checkStoreItem(item) {
      this.checkStorId = item.shopId
      this.getStoreDetail(item.shopId)
    },
  },
}
</script>

<style scoped lang="less">
.left {
  width: 20%;
}

.right {
  width: 79%;
  margin-left: 50px;
}

.topInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.el-link {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 8px;
}

.el-button {
  background-color: #303e9d;
  border: none;
}

li {
  padding: 5px 0;
}

li:hover {
  background-color: #f3f6fd;
  color: #3644a0;
}

.left {
  li {
    span {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #3644a0;
      margin-right: 10px;
    }
  }
}

.province {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #e6a23c;
  color: #e6a23c;
  font-size: 12px;
  font-weight: normal;
}
</style>
